<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2946476" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a5;</span>
                <div class="name">less</div>
                <div class="code-name">&amp;#xe6a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a6;</span>
                <div class="name">more_unfold</div>
                <div class="code-name">&amp;#xe6a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a7;</span>
                <div class="name">more</div>
                <div class="code-name">&amp;#xe6a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a9;</span>
                <div class="name">QRCode</div>
                <div class="code-name">&amp;#xe6a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ab;</span>
                <div class="name">RFQ</div>
                <div class="code-name">&amp;#xe6ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ae;</span>
                <div class="name">set</div>
                <div class="code-name">&amp;#xe6ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6af;</span>
                <div class="name">Smile</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b6;</span>
                <div class="name">warning</div>
                <div class="code-name">&amp;#xe6b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b8;</span>
                <div class="name">account</div>
                <div class="code-name">&amp;#xe6b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bb;</span>
                <div class="name">clock</div>
                <div class="code-name">&amp;#xe6bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ce;</span>
                <div class="name">process</div>
                <div class="code-name">&amp;#xe6ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6de;</span>
                <div class="name">lights</div>
                <div class="code-name">&amp;#xe6de;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e0;</span>
                <div class="name">sports</div>
                <div class="code-name">&amp;#xe6e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f2;</span>
                <div class="name">pin</div>
                <div class="code-name">&amp;#xe6f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f4;</span>
                <div class="name">product-features</div>
                <div class="code-name">&amp;#xe6f4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ad;</span>
                <div class="name">nav-list</div>
                <div class="code-name">&amp;#xe7ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ae;</span>
                <div class="name">dollar</div>
                <div class="code-name">&amp;#xe7ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7af;</span>
                <div class="name">raw</div>
                <div class="code-name">&amp;#xe7af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b0;</span>
                <div class="name">assessed-Badge</div>
                <div class="code-name">&amp;#xe7b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b1;</span>
                <div class="name">personal-center</div>
                <div class="code-name">&amp;#xe7b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b2;</span>
                <div class="name">integral</div>
                <div class="code-name">&amp;#xe7b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b3;</span>
                <div class="name">skip</div>
                <div class="code-name">&amp;#xe7b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b4;</span>
                <div class="name">compass</div>
                <div class="code-name">&amp;#xe7b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b5;</span>
                <div class="name">security</div>
                <div class="code-name">&amp;#xe7b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b6;</span>
                <div class="name">bussiness-man</div>
                <div class="code-name">&amp;#xe7b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b7;</span>
                <div class="name"> inquiry-template</div>
                <div class="code-name">&amp;#xe7b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b8;</span>
                <div class="name">template-default</div>
                <div class="code-name">&amp;#xe7b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b9;</span>
                <div class="name">survey</div>
                <div class="code-name">&amp;#xe7b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ba;</span>
                <div class="name">bussiness-card</div>
                <div class="code-name">&amp;#xe7ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7bb;</span>
                <div class="name">color</div>
                <div class="code-name">&amp;#xe7bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7cd;</span>
                <div class="name">color-filling</div>
                <div class="code-name">&amp;#xe7cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe811;</span>
                <div class="name">logistic</div>
                <div class="code-name">&amp;#xe811;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe820;</span>
                <div class="name">video</div>
                <div class="code-name">&amp;#xe820;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe82b;</span>
                <div class="name">password</div>
                <div class="code-name">&amp;#xe82b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe83c;</span>
                <div class="name">4column</div>
                <div class="code-name">&amp;#xe83c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe87a;</span>
                <div class="name">pin-fill</div>
                <div class="code-name">&amp;#xe87a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe87b;</span>
                <div class="name">add-account</div>
                <div class="code-name">&amp;#xe87b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe87c;</span>
                <div class="name">warehouse-delivery </div>
                <div class="code-name">&amp;#xe87c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe87d;</span>
                <div class="name">customization</div>
                <div class="code-name">&amp;#xe87d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe87e;</span>
                <div class="name">inspection</div>
                <div class="code-name">&amp;#xe87e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe87f;</span>
                <div class="name">online-tracking</div>
                <div class="code-name">&amp;#xe87f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe880;</span>
                <div class="name">electrical-equipment</div>
                <div class="code-name">&amp;#xe880;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe882;</span>
                <div class="name">tools-hardware</div>
                <div class="code-name">&amp;#xe882;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe883;</span>
                <div class="name">office-supplies</div>
                <div class="code-name">&amp;#xe883;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe696;</span>
                <div class="name">all</div>
                <div class="code-name">&amp;#xe696;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe697;</span>
                <div class="name">back</div>
                <div class="code-name">&amp;#xe697;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe698;</span>
                <div class="name">cart</div>
                <div class="code-name">&amp;#xe698;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe699;</span>
                <div class="name">Category</div>
                <div class="code-name">&amp;#xe699;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a3;</span>
                <div class="name">help</div>
                <div class="code-name">&amp;#xe6a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a4;</span>
                <div class="name">information</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f9;</span>
                <div class="name">icon_photo</div>
                <div class="code-name">&amp;#xe6f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fa;</span>
                <div class="name">icon_mail</div>
                <div class="code-name">&amp;#xe6fa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fb;</span>
                <div class="name">icon_menu</div>
                <div class="code-name">&amp;#xe6fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fc;</span>
                <div class="name">icon_news</div>
                <div class="code-name">&amp;#xe6fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fd;</span>
                <div class="name">icon_buy</div>
                <div class="code-name">&amp;#xe6fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fe;</span>
                <div class="name">icon_home</div>
                <div class="code-name">&amp;#xe6fe;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ff;</span>
                <div class="name">icon_edit</div>
                <div class="code-name">&amp;#xe6ff;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe700;</span>
                <div class="name">icon_camera</div>
                <div class="code-name">&amp;#xe700;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe701;</span>
                <div class="name">icon_computer</div>
                <div class="code-name">&amp;#xe701;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe702;</span>
                <div class="name">icon_list</div>
                <div class="code-name">&amp;#xe702;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe703;</span>
                <div class="name">icon_cellphone</div>
                <div class="code-name">&amp;#xe703;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe704;</span>
                <div class="name">icon_notice</div>
                <div class="code-name">&amp;#xe704;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe705;</span>
                <div class="name">icon_me</div>
                <div class="code-name">&amp;#xe705;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe706;</span>
                <div class="name">icon_setting</div>
                <div class="code-name">&amp;#xe706;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe707;</span>
                <div class="name">icon_rest</div>
                <div class="code-name">&amp;#xe707;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe708;</span>
                <div class="name">icon_delete</div>
                <div class="code-name">&amp;#xe708;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe709;</span>
                <div class="name">icon_express</div>
                <div class="code-name">&amp;#xe709;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70a;</span>
                <div class="name">icon_wallet</div>
                <div class="code-name">&amp;#xe70a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70b;</span>
                <div class="name">icon_cart</div>
                <div class="code-name">&amp;#xe70b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70c;</span>
                <div class="name">icon_label</div>
                <div class="code-name">&amp;#xe70c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70d;</span>
                <div class="name">icon_transport</div>
                <div class="code-name">&amp;#xe70d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70e;</span>
                <div class="name">icon_after sales</div>
                <div class="code-name">&amp;#xe70e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70f;</span>
                <div class="name">icon_aviation</div>
                <div class="code-name">&amp;#xe70f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe710;</span>
                <div class="name">icon_female</div>
                <div class="code-name">&amp;#xe710;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe711;</span>
                <div class="name">icon_password</div>
                <div class="code-name">&amp;#xe711;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe712;</span>
                <div class="name">icon_male</div>
                <div class="code-name">&amp;#xe712;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe713;</span>
                <div class="name">icon_verification code</div>
                <div class="code-name">&amp;#xe713;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe714;</span>
                <div class="name">icon_music</div>
                <div class="code-name">&amp;#xe714;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe715;</span>
                <div class="name">icon_date</div>
                <div class="code-name">&amp;#xe715;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe716;</span>
                <div class="name">icon_customer service</div>
                <div class="code-name">&amp;#xe716;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe717;</span>
                <div class="name">icon_address</div>
                <div class="code-name">&amp;#xe717;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe718;</span>
                <div class="name">icon_personal information</div>
                <div class="code-name">&amp;#xe718;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe719;</span>
                <div class="name">icon_view</div>
                <div class="code-name">&amp;#xe719;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71a;</span>
                <div class="name">icon_search</div>
                <div class="code-name">&amp;#xe71a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71b;</span>
                <div class="name">icon_printer</div>
                <div class="code-name">&amp;#xe71b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71c;</span>
                <div class="name">icon_save</div>
                <div class="code-name">&amp;#xe71c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71d;</span>
                <div class="name">icon_time</div>
                <div class="code-name">&amp;#xe71d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71e;</span>
                <div class="name">icon_coupons</div>
                <div class="code-name">&amp;#xe71e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71f;</span>
                <div class="name">icon_prepaid card</div>
                <div class="code-name">&amp;#xe71f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe720;</span>
                <div class="name">icon_red packet</div>
                <div class="code-name">&amp;#xe720;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe721;</span>
                <div class="name">icon_like</div>
                <div class="code-name">&amp;#xe721;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe722;</span>
                <div class="name">icon_like_sel</div>
                <div class="code-name">&amp;#xe722;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe723;</span>
                <div class="name">icon_collect</div>
                <div class="code-name">&amp;#xe723;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe724;</span>
                <div class="name">icon_more</div>
                <div class="code-name">&amp;#xe724;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe725;</span>
                <div class="name">icon_collect_sel</div>
                <div class="code-name">&amp;#xe725;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe726;</span>
                <div class="name">icon_more_sel</div>
                <div class="code-name">&amp;#xe726;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe727;</span>
                <div class="name">icon_phone</div>
                <div class="code-name">&amp;#xe727;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe728;</span>
                <div class="name">icon_phone_sel</div>
                <div class="code-name">&amp;#xe728;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe729;</span>
                <div class="name">icon_help</div>
                <div class="code-name">&amp;#xe729;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72a;</span>
                <div class="name">icon_warning</div>
                <div class="code-name">&amp;#xe72a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72b;</span>
                <div class="name">icon_right_circle</div>
                <div class="code-name">&amp;#xe72b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72c;</span>
                <div class="name">icon_information</div>
                <div class="code-name">&amp;#xe72c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72d;</span>
                <div class="name">icon_wrong_circle</div>
                <div class="code-name">&amp;#xe72d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72e;</span>
                <div class="name">icon_minus</div>
                <div class="code-name">&amp;#xe72e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72f;</span>
                <div class="name">icon_plus</div>
                <div class="code-name">&amp;#xe72f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe730;</span>
                <div class="name">icon_minus_circle</div>
                <div class="code-name">&amp;#xe730;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe731;</span>
                <div class="name">icon_plus_circle</div>
                <div class="code-name">&amp;#xe731;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe732;</span>
                <div class="name">icon_wrong</div>
                <div class="code-name">&amp;#xe732;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe733;</span>
                <div class="name">icon_right</div>
                <div class="code-name">&amp;#xe733;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe734;</span>
                <div class="name">icon_caret_right</div>
                <div class="code-name">&amp;#xe734;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe735;</span>
                <div class="name">icon_caret_left</div>
                <div class="code-name">&amp;#xe735;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe736;</span>
                <div class="name">icon_arrow_left</div>
                <div class="code-name">&amp;#xe736;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe737;</span>
                <div class="name">icon_arrow_right</div>
                <div class="code-name">&amp;#xe737;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe738;</span>
                <div class="name">icon_zoom_in</div>
                <div class="code-name">&amp;#xe738;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe739;</span>
                <div class="name">icon_zoom_out</div>
                <div class="code-name">&amp;#xe739;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73a;</span>
                <div class="name">icon_back</div>
                <div class="code-name">&amp;#xe73a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73b;</span>
                <div class="name">icon_next</div>
                <div class="code-name">&amp;#xe73b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73c;</span>
                <div class="name">icon_download</div>
                <div class="code-name">&amp;#xe73c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73d;</span>
                <div class="name">icon_upload</div>
                <div class="code-name">&amp;#xe73d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73e;</span>
                <div class="name">icon_share</div>
                <div class="code-name">&amp;#xe73e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73f;</span>
                <div class="name">icon_move</div>
                <div class="code-name">&amp;#xe73f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe740;</span>
                <div class="name">icon_comment</div>
                <div class="code-name">&amp;#xe740;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe741;</span>
                <div class="name">icon_refresh</div>
                <div class="code-name">&amp;#xe741;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe742;</span>
                <div class="name">icon_input</div>
                <div class="code-name">&amp;#xe742;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe743;</span>
                <div class="name">icon_link</div>
                <div class="code-name">&amp;#xe743;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe744;</span>
                <div class="name">icon_list</div>
                <div class="code-name">&amp;#xe744;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe745;</span>
                <div class="name">icon_caret</div>
                <div class="code-name">&amp;#xe745;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe746;</span>
                <div class="name">icon_copy</div>
                <div class="code-name">&amp;#xe746;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe747;</span>
                <div class="name">icon_data</div>
                <div class="code-name">&amp;#xe747;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe748;</span>
                <div class="name">icon_forward</div>
                <div class="code-name">&amp;#xe748;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe749;</span>
                <div class="name">icon_share</div>
                <div class="code-name">&amp;#xe749;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74a;</span>
                <div class="name">icon_visible</div>
                <div class="code-name">&amp;#xe74a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74b;</span>
                <div class="name">icon_company</div>
                <div class="code-name">&amp;#xe74b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74c;</span>
                <div class="name">icon_employ</div>
                <div class="code-name">&amp;#xe74c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74d;</span>
                <div class="name">icon_invisible</div>
                <div class="code-name">&amp;#xe74d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74e;</span>
                <div class="name">icon_dress up</div>
                <div class="code-name">&amp;#xe74e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74f;</span>
                <div class="name">icon_file</div>
                <div class="code-name">&amp;#xe74f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe750;</span>
                <div class="name">icon_play</div>
                <div class="code-name">&amp;#xe750;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe751;</span>
                <div class="name">icon_weather</div>
                <div class="code-name">&amp;#xe751;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe752;</span>
                <div class="name">icon_voice</div>
                <div class="code-name">&amp;#xe752;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe753;</span>
                <div class="name">icon_browser</div>
                <div class="code-name">&amp;#xe753;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe754;</span>
                <div class="name">icon_scan</div>
                <div class="code-name">&amp;#xe754;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe755;</span>
                <div class="name">icon_order</div>
                <div class="code-name">&amp;#xe755;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe756;</span>
                <div class="name">icon_qr code</div>
                <div class="code-name">&amp;#xe756;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe757;</span>
                <div class="name">icon_wifi</div>
                <div class="code-name">&amp;#xe757;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe758;</span>
                <div class="name">icon_location</div>
                <div class="code-name">&amp;#xe758;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe759;</span>
                <div class="name">icon_gift</div>
                <div class="code-name">&amp;#xe759;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75a;</span>
                <div class="name">icon_mouse</div>
                <div class="code-name">&amp;#xe75a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75b;</span>
                <div class="name">icon_calculator</div>
                <div class="code-name">&amp;#xe75b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75c;</span>
                <div class="name">icon_hot</div>
                <div class="code-name">&amp;#xe75c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75d;</span>
                <div class="name">icon_travel</div>
                <div class="code-name">&amp;#xe75d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75e;</span>
                <div class="name">icon_upload</div>
                <div class="code-name">&amp;#xe75e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75f;</span>
                <div class="name">icon_microphone</div>
                <div class="code-name">&amp;#xe75f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe760;</span>
                <div class="name">icon_train</div>
                <div class="code-name">&amp;#xe760;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe761;</span>
                <div class="name">icon_word</div>
                <div class="code-name">&amp;#xe761;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe762;</span>
                <div class="name">icon_idea</div>
                <div class="code-name">&amp;#xe762;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe763;</span>
                <div class="name">icon_trophy</div>
                <div class="code-name">&amp;#xe763;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe764;</span>
                <div class="name">icon_integral</div>
                <div class="code-name">&amp;#xe764;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe765;</span>
                <div class="name">icon_target</div>
                <div class="code-name">&amp;#xe765;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe766;</span>
                <div class="name">icon_video camera</div>
                <div class="code-name">&amp;#xe766;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe767;</span>
                <div class="name">icon_footprint</div>
                <div class="code-name">&amp;#xe767;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe768;</span>
                <div class="name">icon_route</div>
                <div class="code-name">&amp;#xe768;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe769;</span>
                <div class="name">icon_switch</div>
                <div class="code-name">&amp;#xe769;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76a;</span>
                <div class="name">icon_alarm</div>
                <div class="code-name">&amp;#xe76a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76b;</span>
                <div class="name">icon_signal</div>
                <div class="code-name">&amp;#xe76b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76c;</span>
                <div class="name">icon_server</div>
                <div class="code-name">&amp;#xe76c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76d;</span>
                <div class="name">icon_screen</div>
                <div class="code-name">&amp;#xe76d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76e;</span>
                <div class="name">icon_choice</div>
                <div class="code-name">&amp;#xe76e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76f;</span>
                <div class="name">icon_three-dimensional</div>
                <div class="code-name">&amp;#xe76f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe770;</span>
                <div class="name">icon_security</div>
                <div class="code-name">&amp;#xe770;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe771;</span>
                <div class="name">icon_add files</div>
                <div class="code-name">&amp;#xe771;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe772;</span>
                <div class="name">icon_word</div>
                <div class="code-name">&amp;#xe772;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe773;</span>
                <div class="name">icon_add</div>
                <div class="code-name">&amp;#xe773;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe774;</span>
                <div class="name">icon_ppt</div>
                <div class="code-name">&amp;#xe774;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe775;</span>
                <div class="name">icon_invitation</div>
                <div class="code-name">&amp;#xe775;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe776;</span>
                <div class="name">icon_medal</div>
                <div class="code-name">&amp;#xe776;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe777;</span>
                <div class="name">icon_excel</div>
                <div class="code-name">&amp;#xe777;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe778;</span>
                <div class="name">icon_information</div>
                <div class="code-name">&amp;#xe778;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe779;</span>
                <div class="name">icon_global</div>
                <div class="code-name">&amp;#xe779;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77a;</span>
                <div class="name">icon_set top</div>
                <div class="code-name">&amp;#xe77a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77b;</span>
                <div class="name">icon_move up</div>
                <div class="code-name">&amp;#xe77b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77c;</span>
                <div class="name">icon_personal center</div>
                <div class="code-name">&amp;#xe77c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77d;</span>
                <div class="name">icon_sign out</div>
                <div class="code-name">&amp;#xe77d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77e;</span>
                <div class="name">icon_menu</div>
                <div class="code-name">&amp;#xe77e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77f;</span>
                <div class="name">icon_pie chart</div>
                <div class="code-name">&amp;#xe77f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe780;</span>
                <div class="name">icon_map</div>
                <div class="code-name">&amp;#xe780;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe781;</span>
                <div class="name">icon_text</div>
                <div class="code-name">&amp;#xe781;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe782;</span>
                <div class="name">icon_clean</div>
                <div class="code-name">&amp;#xe782;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe783;</span>
                <div class="name">icon_color</div>
                <div class="code-name">&amp;#xe783;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe784;</span>
                <div class="name">icon_word size_narrow</div>
                <div class="code-name">&amp;#xe784;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe785;</span>
                <div class="name">icon_layout</div>
                <div class="code-name">&amp;#xe785;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe786;</span>
                <div class="name">icon_grid</div>
                <div class="code-name">&amp;#xe786;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe787;</span>
                <div class="name">icon_enclosure</div>
                <div class="code-name">&amp;#xe787;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe788;</span>
                <div class="name">icon_word size_enlarge</div>
                <div class="code-name">&amp;#xe788;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe789;</span>
                <div class="name">icon_small screen</div>
                <div class="code-name">&amp;#xe789;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78a;</span>
                <div class="name">icon_full screen</div>
                <div class="code-name">&amp;#xe78a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78b;</span>
                <div class="name">icon_cloud-based</div>
                <div class="code-name">&amp;#xe78b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78c;</span>
                <div class="name">icon_pause</div>
                <div class="code-name">&amp;#xe78c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78d;</span>
                <div class="name">icon_next</div>
                <div class="code-name">&amp;#xe78d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78e;</span>
                <div class="name">icon_previous</div>
                <div class="code-name">&amp;#xe78e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78f;</span>
                <div class="name">icon_lightning</div>
                <div class="code-name">&amp;#xe78f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe790;</span>
                <div class="name">icon_contact list</div>
                <div class="code-name">&amp;#xe790;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe791;</span>
                <div class="name">icon_friends</div>
                <div class="code-name">&amp;#xe791;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe792;</span>
                <div class="name">icon_bluetooth</div>
                <div class="code-name">&amp;#xe792;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe793;</span>
                <div class="name">icon_gesture</div>
                <div class="code-name">&amp;#xe793;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe794;</span>
                <div class="name">icon_resources</div>
                <div class="code-name">&amp;#xe794;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe795;</span>
                <div class="name">icon_find</div>
                <div class="code-name">&amp;#xe795;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe796;</span>
                <div class="name">icon_adjust</div>
                <div class="code-name">&amp;#xe796;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe797;</span>
                <div class="name">icon-setting</div>
                <div class="code-name">&amp;#xe797;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe798;</span>
                <div class="name">icon_praise</div>
                <div class="code-name">&amp;#xe798;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe799;</span>
                <div class="name">icon_diamond</div>
                <div class="code-name">&amp;#xe799;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79a;</span>
                <div class="name">icon_crown</div>
                <div class="code-name">&amp;#xe79a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79b;</span>
                <div class="name">icon_education</div>
                <div class="code-name">&amp;#xe79b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79c;</span>
                <div class="name">icon_read</div>
                <div class="code-name">&amp;#xe79c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79d;</span>
                <div class="name">icon_sign</div>
                <div class="code-name">&amp;#xe79d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79e;</span>
                <div class="name">icon_invoice</div>
                <div class="code-name">&amp;#xe79e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79f;</span>
                <div class="name">icon_alert</div>
                <div class="code-name">&amp;#xe79f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a0;</span>
                <div class="name">icon_asset</div>
                <div class="code-name">&amp;#xe7a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a1;</span>
                <div class="name">icon_attention</div>
                <div class="code-name">&amp;#xe7a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a2;</span>
                <div class="name">icon_remove friend</div>
                <div class="code-name">&amp;#xe7a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a3;</span>
                <div class="name">icon_add friend</div>
                <div class="code-name">&amp;#xe7a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a4;</span>
                <div class="name">icon_resume</div>
                <div class="code-name">&amp;#xe7a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a5;</span>
                <div class="name">icon_sign in</div>
                <div class="code-name">&amp;#xe7a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a6;</span>
                <div class="name">icon_cooperation</div>
                <div class="code-name">&amp;#xe7a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a7;</span>
                <div class="name">icon_examine</div>
                <div class="code-name">&amp;#xe7a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a8;</span>
                <div class="name">icon_click</div>
                <div class="code-name">&amp;#xe7a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a9;</span>
                <div class="name">icon_all day</div>
                <div class="code-name">&amp;#xe7a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7aa;</span>
                <div class="name">icon_revise</div>
                <div class="code-name">&amp;#xe7aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ab;</span>
                <div class="name">icon_like</div>
                <div class="code-name">&amp;#xe7ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ac;</span>
                <div class="name">icon_like_sel</div>
                <div class="code-name">&amp;#xe7ac;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1637332365850') format('woff2'),
       url('iconfont.woff?t=1637332365850') format('woff'),
       url('iconfont.ttf?t=1637332365850') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-less"></span>
            <div class="name">
              less
            </div>
            <div class="code-name">.icon-less
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moreunfold"></span>
            <div class="name">
              more_unfold
            </div>
            <div class="code-name">.icon-moreunfold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-more"></span>
            <div class="name">
              more
            </div>
            <div class="code-name">.icon-more
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qrcode"></span>
            <div class="name">
              QRCode
            </div>
            <div class="code-name">.icon-qrcode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rfq"></span>
            <div class="name">
              RFQ
            </div>
            <div class="code-name">.icon-rfq
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-set"></span>
            <div class="name">
              set
            </div>
            <div class="code-name">.icon-set
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-smile"></span>
            <div class="name">
              Smile
            </div>
            <div class="code-name">.icon-smile
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-warning"></span>
            <div class="name">
              warning
            </div>
            <div class="code-name">.icon-warning
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-account"></span>
            <div class="name">
              account
            </div>
            <div class="code-name">.icon-account
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-clock"></span>
            <div class="name">
              clock
            </div>
            <div class="code-name">.icon-clock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-process"></span>
            <div class="name">
              process
            </div>
            <div class="code-name">.icon-process
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lights"></span>
            <div class="name">
              lights
            </div>
            <div class="code-name">.icon-lights
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sports"></span>
            <div class="name">
              sports
            </div>
            <div class="code-name">.icon-sports
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pin"></span>
            <div class="name">
              pin
            </div>
            <div class="code-name">.icon-pin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-productfeatures"></span>
            <div class="name">
              product-features
            </div>
            <div class="code-name">.icon-productfeatures
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-navlist"></span>
            <div class="name">
              nav-list
            </div>
            <div class="code-name">.icon-navlist
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dollar"></span>
            <div class="name">
              dollar
            </div>
            <div class="code-name">.icon-dollar
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-raw"></span>
            <div class="name">
              raw
            </div>
            <div class="code-name">.icon-raw
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-assessedbadge"></span>
            <div class="name">
              assessed-Badge
            </div>
            <div class="code-name">.icon-assessedbadge
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gerenzhongxin"></span>
            <div class="name">
              personal-center
            </div>
            <div class="code-name">.icon-gerenzhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jifen"></span>
            <div class="name">
              integral
            </div>
            <div class="code-name">.icon-jifen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-skip"></span>
            <div class="name">
              skip
            </div>
            <div class="code-name">.icon-skip
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-compass"></span>
            <div class="name">
              compass
            </div>
            <div class="code-name">.icon-compass
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-security"></span>
            <div class="name">
              security
            </div>
            <div class="code-name">.icon-security
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bussinessman"></span>
            <div class="name">
              bussiness-man
            </div>
            <div class="code-name">.icon-bussinessman
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-inquirytemplate"></span>
            <div class="name">
               inquiry-template
            </div>
            <div class="code-name">.icon-inquirytemplate
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-templatedefault"></span>
            <div class="name">
              template-default
            </div>
            <div class="code-name">.icon-templatedefault
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-survey"></span>
            <div class="name">
              survey
            </div>
            <div class="code-name">.icon-survey
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bussinesscard"></span>
            <div class="name">
              bussiness-card
            </div>
            <div class="code-name">.icon-bussinesscard
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-color"></span>
            <div class="name">
              color
            </div>
            <div class="code-name">.icon-color
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-color-filling"></span>
            <div class="name">
              color-filling
            </div>
            <div class="code-name">.icon-color-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-logistic"></span>
            <div class="name">
              logistic
            </div>
            <div class="code-name">.icon-logistic
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-video"></span>
            <div class="name">
              video
            </div>
            <div class="code-name">.icon-video
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-password"></span>
            <div class="name">
              password
            </div>
            <div class="code-name">.icon-password
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-column"></span>
            <div class="name">
              4column
            </div>
            <div class="code-name">.icon-column
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pin-fill"></span>
            <div class="name">
              pin-fill
            </div>
            <div class="code-name">.icon-pin-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-add-account"></span>
            <div class="name">
              add-account
            </div>
            <div class="code-name">.icon-add-account
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-warehouse-delivery"></span>
            <div class="name">
              warehouse-delivery 
            </div>
            <div class="code-name">.icon-warehouse-delivery
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-customization"></span>
            <div class="name">
              customization
            </div>
            <div class="code-name">.icon-customization
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-inspection"></span>
            <div class="name">
              inspection
            </div>
            <div class="code-name">.icon-inspection
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-online-tracking"></span>
            <div class="name">
              online-tracking
            </div>
            <div class="code-name">.icon-online-tracking
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-electrical-equipment"></span>
            <div class="name">
              electrical-equipment
            </div>
            <div class="code-name">.icon-electrical-equipment
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tools-hardware"></span>
            <div class="name">
              tools-hardware
            </div>
            <div class="code-name">.icon-tools-hardware
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-office-supplies"></span>
            <div class="name">
              office-supplies
            </div>
            <div class="code-name">.icon-office-supplies
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-all"></span>
            <div class="name">
              all
            </div>
            <div class="code-name">.icon-all
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-back"></span>
            <div class="name">
              back
            </div>
            <div class="code-name">.icon-back
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cart"></span>
            <div class="name">
              cart
            </div>
            <div class="code-name">.icon-cart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-category"></span>
            <div class="name">
              Category
            </div>
            <div class="code-name">.icon-category
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-help"></span>
            <div class="name">
              help
            </div>
            <div class="code-name">.icon-help
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-information"></span>
            <div class="name">
              information
            </div>
            <div class="code-name">.icon-information
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-"></span>
            <div class="name">
              icon_photo
            </div>
            <div class="code-name">.icon-icon-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-1"></span>
            <div class="name">
              icon_mail
            </div>
            <div class="code-name">.icon-icon-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-2"></span>
            <div class="name">
              icon_menu
            </div>
            <div class="code-name">.icon-icon-2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-3"></span>
            <div class="name">
              icon_news
            </div>
            <div class="code-name">.icon-icon-3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-4"></span>
            <div class="name">
              icon_buy
            </div>
            <div class="code-name">.icon-icon-4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-5"></span>
            <div class="name">
              icon_home
            </div>
            <div class="code-name">.icon-icon-5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-6"></span>
            <div class="name">
              icon_edit
            </div>
            <div class="code-name">.icon-icon-6
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-7"></span>
            <div class="name">
              icon_camera
            </div>
            <div class="code-name">.icon-icon-7
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-8"></span>
            <div class="name">
              icon_computer
            </div>
            <div class="code-name">.icon-icon-8
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-9"></span>
            <div class="name">
              icon_list
            </div>
            <div class="code-name">.icon-icon-9
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-10"></span>
            <div class="name">
              icon_cellphone
            </div>
            <div class="code-name">.icon-icon-10
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-11"></span>
            <div class="name">
              icon_notice
            </div>
            <div class="code-name">.icon-icon-11
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-12"></span>
            <div class="name">
              icon_me
            </div>
            <div class="code-name">.icon-icon-12
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-13"></span>
            <div class="name">
              icon_setting
            </div>
            <div class="code-name">.icon-icon-13
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-14"></span>
            <div class="name">
              icon_rest
            </div>
            <div class="code-name">.icon-icon-14
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-15"></span>
            <div class="name">
              icon_delete
            </div>
            <div class="code-name">.icon-icon-15
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-16"></span>
            <div class="name">
              icon_express
            </div>
            <div class="code-name">.icon-icon-16
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-17"></span>
            <div class="name">
              icon_wallet
            </div>
            <div class="code-name">.icon-icon-17
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-18"></span>
            <div class="name">
              icon_cart
            </div>
            <div class="code-name">.icon-icon-18
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-19"></span>
            <div class="name">
              icon_label
            </div>
            <div class="code-name">.icon-icon-19
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-20"></span>
            <div class="name">
              icon_transport
            </div>
            <div class="code-name">.icon-icon-20
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-21"></span>
            <div class="name">
              icon_after sales
            </div>
            <div class="code-name">.icon-icon-21
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-22"></span>
            <div class="name">
              icon_aviation
            </div>
            <div class="code-name">.icon-icon-22
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-23"></span>
            <div class="name">
              icon_female
            </div>
            <div class="code-name">.icon-icon-23
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-24"></span>
            <div class="name">
              icon_password
            </div>
            <div class="code-name">.icon-icon-24
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-25"></span>
            <div class="name">
              icon_male
            </div>
            <div class="code-name">.icon-icon-25
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-26"></span>
            <div class="name">
              icon_verification code
            </div>
            <div class="code-name">.icon-icon-26
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-27"></span>
            <div class="name">
              icon_music
            </div>
            <div class="code-name">.icon-icon-27
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-28"></span>
            <div class="name">
              icon_date
            </div>
            <div class="code-name">.icon-icon-28
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-29"></span>
            <div class="name">
              icon_customer service
            </div>
            <div class="code-name">.icon-icon-29
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-30"></span>
            <div class="name">
              icon_address
            </div>
            <div class="code-name">.icon-icon-30
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-31"></span>
            <div class="name">
              icon_personal information
            </div>
            <div class="code-name">.icon-icon-31
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-32"></span>
            <div class="name">
              icon_view
            </div>
            <div class="code-name">.icon-icon-32
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-33"></span>
            <div class="name">
              icon_search
            </div>
            <div class="code-name">.icon-icon-33
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-34"></span>
            <div class="name">
              icon_printer
            </div>
            <div class="code-name">.icon-icon-34
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-35"></span>
            <div class="name">
              icon_save
            </div>
            <div class="code-name">.icon-icon-35
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-36"></span>
            <div class="name">
              icon_time
            </div>
            <div class="code-name">.icon-icon-36
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-37"></span>
            <div class="name">
              icon_coupons
            </div>
            <div class="code-name">.icon-icon-37
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-38"></span>
            <div class="name">
              icon_prepaid card
            </div>
            <div class="code-name">.icon-icon-38
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-39"></span>
            <div class="name">
              icon_red packet
            </div>
            <div class="code-name">.icon-icon-39
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-40"></span>
            <div class="name">
              icon_like
            </div>
            <div class="code-name">.icon-icon-40
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-41"></span>
            <div class="name">
              icon_like_sel
            </div>
            <div class="code-name">.icon-icon-41
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-42"></span>
            <div class="name">
              icon_collect
            </div>
            <div class="code-name">.icon-icon-42
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-43"></span>
            <div class="name">
              icon_more
            </div>
            <div class="code-name">.icon-icon-43
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-44"></span>
            <div class="name">
              icon_collect_sel
            </div>
            <div class="code-name">.icon-icon-44
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-45"></span>
            <div class="name">
              icon_more_sel
            </div>
            <div class="code-name">.icon-icon-45
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-46"></span>
            <div class="name">
              icon_phone
            </div>
            <div class="code-name">.icon-icon-46
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-47"></span>
            <div class="name">
              icon_phone_sel
            </div>
            <div class="code-name">.icon-icon-47
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-48"></span>
            <div class="name">
              icon_help
            </div>
            <div class="code-name">.icon-icon-48
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-49"></span>
            <div class="name">
              icon_warning
            </div>
            <div class="code-name">.icon-icon-49
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-50"></span>
            <div class="name">
              icon_right_circle
            </div>
            <div class="code-name">.icon-icon-50
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-51"></span>
            <div class="name">
              icon_information
            </div>
            <div class="code-name">.icon-icon-51
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-52"></span>
            <div class="name">
              icon_wrong_circle
            </div>
            <div class="code-name">.icon-icon-52
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-53"></span>
            <div class="name">
              icon_minus
            </div>
            <div class="code-name">.icon-icon-53
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-54"></span>
            <div class="name">
              icon_plus
            </div>
            <div class="code-name">.icon-icon-54
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-55"></span>
            <div class="name">
              icon_minus_circle
            </div>
            <div class="code-name">.icon-icon-55
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-56"></span>
            <div class="name">
              icon_plus_circle
            </div>
            <div class="code-name">.icon-icon-56
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-57"></span>
            <div class="name">
              icon_wrong
            </div>
            <div class="code-name">.icon-icon-57
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-58"></span>
            <div class="name">
              icon_right
            </div>
            <div class="code-name">.icon-icon-58
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-59"></span>
            <div class="name">
              icon_caret_right
            </div>
            <div class="code-name">.icon-icon-59
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-60"></span>
            <div class="name">
              icon_caret_left
            </div>
            <div class="code-name">.icon-icon-60
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-61"></span>
            <div class="name">
              icon_arrow_left
            </div>
            <div class="code-name">.icon-icon-61
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-62"></span>
            <div class="name">
              icon_arrow_right
            </div>
            <div class="code-name">.icon-icon-62
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-63"></span>
            <div class="name">
              icon_zoom_in
            </div>
            <div class="code-name">.icon-icon-63
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-64"></span>
            <div class="name">
              icon_zoom_out
            </div>
            <div class="code-name">.icon-icon-64
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-65"></span>
            <div class="name">
              icon_back
            </div>
            <div class="code-name">.icon-icon-65
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-66"></span>
            <div class="name">
              icon_next
            </div>
            <div class="code-name">.icon-icon-66
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-67"></span>
            <div class="name">
              icon_download
            </div>
            <div class="code-name">.icon-icon-67
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-68"></span>
            <div class="name">
              icon_upload
            </div>
            <div class="code-name">.icon-icon-68
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-69"></span>
            <div class="name">
              icon_share
            </div>
            <div class="code-name">.icon-icon-69
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-70"></span>
            <div class="name">
              icon_move
            </div>
            <div class="code-name">.icon-icon-70
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-71"></span>
            <div class="name">
              icon_comment
            </div>
            <div class="code-name">.icon-icon-71
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-72"></span>
            <div class="name">
              icon_refresh
            </div>
            <div class="code-name">.icon-icon-72
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-73"></span>
            <div class="name">
              icon_input
            </div>
            <div class="code-name">.icon-icon-73
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-74"></span>
            <div class="name">
              icon_link
            </div>
            <div class="code-name">.icon-icon-74
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-75"></span>
            <div class="name">
              icon_list
            </div>
            <div class="code-name">.icon-icon-75
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-76"></span>
            <div class="name">
              icon_caret
            </div>
            <div class="code-name">.icon-icon-76
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-77"></span>
            <div class="name">
              icon_copy
            </div>
            <div class="code-name">.icon-icon-77
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-78"></span>
            <div class="name">
              icon_data
            </div>
            <div class="code-name">.icon-icon-78
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-79"></span>
            <div class="name">
              icon_forward
            </div>
            <div class="code-name">.icon-icon-79
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-80"></span>
            <div class="name">
              icon_share
            </div>
            <div class="code-name">.icon-icon-80
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-81"></span>
            <div class="name">
              icon_visible
            </div>
            <div class="code-name">.icon-icon-81
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-82"></span>
            <div class="name">
              icon_company
            </div>
            <div class="code-name">.icon-icon-82
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-83"></span>
            <div class="name">
              icon_employ
            </div>
            <div class="code-name">.icon-icon-83
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-84"></span>
            <div class="name">
              icon_invisible
            </div>
            <div class="code-name">.icon-icon-84
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-85"></span>
            <div class="name">
              icon_dress up
            </div>
            <div class="code-name">.icon-icon-85
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-86"></span>
            <div class="name">
              icon_file
            </div>
            <div class="code-name">.icon-icon-86
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-87"></span>
            <div class="name">
              icon_play
            </div>
            <div class="code-name">.icon-icon-87
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-88"></span>
            <div class="name">
              icon_weather
            </div>
            <div class="code-name">.icon-icon-88
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-89"></span>
            <div class="name">
              icon_voice
            </div>
            <div class="code-name">.icon-icon-89
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-90"></span>
            <div class="name">
              icon_browser
            </div>
            <div class="code-name">.icon-icon-90
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-91"></span>
            <div class="name">
              icon_scan
            </div>
            <div class="code-name">.icon-icon-91
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-92"></span>
            <div class="name">
              icon_order
            </div>
            <div class="code-name">.icon-icon-92
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-93"></span>
            <div class="name">
              icon_qr code
            </div>
            <div class="code-name">.icon-icon-93
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-94"></span>
            <div class="name">
              icon_wifi
            </div>
            <div class="code-name">.icon-icon-94
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-95"></span>
            <div class="name">
              icon_location
            </div>
            <div class="code-name">.icon-icon-95
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-96"></span>
            <div class="name">
              icon_gift
            </div>
            <div class="code-name">.icon-icon-96
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-97"></span>
            <div class="name">
              icon_mouse
            </div>
            <div class="code-name">.icon-icon-97
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-98"></span>
            <div class="name">
              icon_calculator
            </div>
            <div class="code-name">.icon-icon-98
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-99"></span>
            <div class="name">
              icon_hot
            </div>
            <div class="code-name">.icon-icon-99
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-100"></span>
            <div class="name">
              icon_travel
            </div>
            <div class="code-name">.icon-icon-100
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-101"></span>
            <div class="name">
              icon_upload
            </div>
            <div class="code-name">.icon-icon-101
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-102"></span>
            <div class="name">
              icon_microphone
            </div>
            <div class="code-name">.icon-icon-102
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-103"></span>
            <div class="name">
              icon_train
            </div>
            <div class="code-name">.icon-icon-103
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-104"></span>
            <div class="name">
              icon_word
            </div>
            <div class="code-name">.icon-icon-104
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-105"></span>
            <div class="name">
              icon_idea
            </div>
            <div class="code-name">.icon-icon-105
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-106"></span>
            <div class="name">
              icon_trophy
            </div>
            <div class="code-name">.icon-icon-106
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-107"></span>
            <div class="name">
              icon_integral
            </div>
            <div class="code-name">.icon-icon-107
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-108"></span>
            <div class="name">
              icon_target
            </div>
            <div class="code-name">.icon-icon-108
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-109"></span>
            <div class="name">
              icon_video camera
            </div>
            <div class="code-name">.icon-icon-109
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-110"></span>
            <div class="name">
              icon_footprint
            </div>
            <div class="code-name">.icon-icon-110
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-111"></span>
            <div class="name">
              icon_route
            </div>
            <div class="code-name">.icon-icon-111
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-112"></span>
            <div class="name">
              icon_switch
            </div>
            <div class="code-name">.icon-icon-112
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-113"></span>
            <div class="name">
              icon_alarm
            </div>
            <div class="code-name">.icon-icon-113
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-114"></span>
            <div class="name">
              icon_signal
            </div>
            <div class="code-name">.icon-icon-114
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-115"></span>
            <div class="name">
              icon_server
            </div>
            <div class="code-name">.icon-icon-115
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-116"></span>
            <div class="name">
              icon_screen
            </div>
            <div class="code-name">.icon-icon-116
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-117"></span>
            <div class="name">
              icon_choice
            </div>
            <div class="code-name">.icon-icon-117
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-118"></span>
            <div class="name">
              icon_three-dimensional
            </div>
            <div class="code-name">.icon-icon-118
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-119"></span>
            <div class="name">
              icon_security
            </div>
            <div class="code-name">.icon-icon-119
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-120"></span>
            <div class="name">
              icon_add files
            </div>
            <div class="code-name">.icon-icon-120
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-121"></span>
            <div class="name">
              icon_word
            </div>
            <div class="code-name">.icon-icon-121
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-122"></span>
            <div class="name">
              icon_add
            </div>
            <div class="code-name">.icon-icon-122
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-123"></span>
            <div class="name">
              icon_ppt
            </div>
            <div class="code-name">.icon-icon-123
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-124"></span>
            <div class="name">
              icon_invitation
            </div>
            <div class="code-name">.icon-icon-124
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-125"></span>
            <div class="name">
              icon_medal
            </div>
            <div class="code-name">.icon-icon-125
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-126"></span>
            <div class="name">
              icon_excel
            </div>
            <div class="code-name">.icon-icon-126
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-127"></span>
            <div class="name">
              icon_information
            </div>
            <div class="code-name">.icon-icon-127
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-128"></span>
            <div class="name">
              icon_global
            </div>
            <div class="code-name">.icon-icon-128
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-129"></span>
            <div class="name">
              icon_set top
            </div>
            <div class="code-name">.icon-icon-129
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-130"></span>
            <div class="name">
              icon_move up
            </div>
            <div class="code-name">.icon-icon-130
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-131"></span>
            <div class="name">
              icon_personal center
            </div>
            <div class="code-name">.icon-icon-131
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-132"></span>
            <div class="name">
              icon_sign out
            </div>
            <div class="code-name">.icon-icon-132
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-133"></span>
            <div class="name">
              icon_menu
            </div>
            <div class="code-name">.icon-icon-133
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-134"></span>
            <div class="name">
              icon_pie chart
            </div>
            <div class="code-name">.icon-icon-134
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-135"></span>
            <div class="name">
              icon_map
            </div>
            <div class="code-name">.icon-icon-135
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-136"></span>
            <div class="name">
              icon_text
            </div>
            <div class="code-name">.icon-icon-136
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-137"></span>
            <div class="name">
              icon_clean
            </div>
            <div class="code-name">.icon-icon-137
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-138"></span>
            <div class="name">
              icon_color
            </div>
            <div class="code-name">.icon-icon-138
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-139"></span>
            <div class="name">
              icon_word size_narrow
            </div>
            <div class="code-name">.icon-icon-139
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-140"></span>
            <div class="name">
              icon_layout
            </div>
            <div class="code-name">.icon-icon-140
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-141"></span>
            <div class="name">
              icon_grid
            </div>
            <div class="code-name">.icon-icon-141
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-142"></span>
            <div class="name">
              icon_enclosure
            </div>
            <div class="code-name">.icon-icon-142
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-143"></span>
            <div class="name">
              icon_word size_enlarge
            </div>
            <div class="code-name">.icon-icon-143
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-144"></span>
            <div class="name">
              icon_small screen
            </div>
            <div class="code-name">.icon-icon-144
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-145"></span>
            <div class="name">
              icon_full screen
            </div>
            <div class="code-name">.icon-icon-145
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-146"></span>
            <div class="name">
              icon_cloud-based
            </div>
            <div class="code-name">.icon-icon-146
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-147"></span>
            <div class="name">
              icon_pause
            </div>
            <div class="code-name">.icon-icon-147
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-148"></span>
            <div class="name">
              icon_next
            </div>
            <div class="code-name">.icon-icon-148
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-149"></span>
            <div class="name">
              icon_previous
            </div>
            <div class="code-name">.icon-icon-149
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-150"></span>
            <div class="name">
              icon_lightning
            </div>
            <div class="code-name">.icon-icon-150
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-151"></span>
            <div class="name">
              icon_contact list
            </div>
            <div class="code-name">.icon-icon-151
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-152"></span>
            <div class="name">
              icon_friends
            </div>
            <div class="code-name">.icon-icon-152
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-153"></span>
            <div class="name">
              icon_bluetooth
            </div>
            <div class="code-name">.icon-icon-153
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-154"></span>
            <div class="name">
              icon_gesture
            </div>
            <div class="code-name">.icon-icon-154
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-155"></span>
            <div class="name">
              icon_resources
            </div>
            <div class="code-name">.icon-icon-155
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-156"></span>
            <div class="name">
              icon_find
            </div>
            <div class="code-name">.icon-icon-156
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-157"></span>
            <div class="name">
              icon_adjust
            </div>
            <div class="code-name">.icon-icon-157
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-158"></span>
            <div class="name">
              icon-setting
            </div>
            <div class="code-name">.icon-icon-158
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-159"></span>
            <div class="name">
              icon_praise
            </div>
            <div class="code-name">.icon-icon-159
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-160"></span>
            <div class="name">
              icon_diamond
            </div>
            <div class="code-name">.icon-icon-160
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-161"></span>
            <div class="name">
              icon_crown
            </div>
            <div class="code-name">.icon-icon-161
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-162"></span>
            <div class="name">
              icon_education
            </div>
            <div class="code-name">.icon-icon-162
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-163"></span>
            <div class="name">
              icon_read
            </div>
            <div class="code-name">.icon-icon-163
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-164"></span>
            <div class="name">
              icon_sign
            </div>
            <div class="code-name">.icon-icon-164
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-165"></span>
            <div class="name">
              icon_invoice
            </div>
            <div class="code-name">.icon-icon-165
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-166"></span>
            <div class="name">
              icon_alert
            </div>
            <div class="code-name">.icon-icon-166
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-167"></span>
            <div class="name">
              icon_asset
            </div>
            <div class="code-name">.icon-icon-167
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-168"></span>
            <div class="name">
              icon_attention
            </div>
            <div class="code-name">.icon-icon-168
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-169"></span>
            <div class="name">
              icon_remove friend
            </div>
            <div class="code-name">.icon-icon-169
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-170"></span>
            <div class="name">
              icon_add friend
            </div>
            <div class="code-name">.icon-icon-170
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-171"></span>
            <div class="name">
              icon_resume
            </div>
            <div class="code-name">.icon-icon-171
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-172"></span>
            <div class="name">
              icon_sign in
            </div>
            <div class="code-name">.icon-icon-172
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-173"></span>
            <div class="name">
              icon_cooperation
            </div>
            <div class="code-name">.icon-icon-173
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-174"></span>
            <div class="name">
              icon_examine
            </div>
            <div class="code-name">.icon-icon-174
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-175"></span>
            <div class="name">
              icon_click
            </div>
            <div class="code-name">.icon-icon-175
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-176"></span>
            <div class="name">
              icon_all day
            </div>
            <div class="code-name">.icon-icon-176
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-177"></span>
            <div class="name">
              icon_revise
            </div>
            <div class="code-name">.icon-icon-177
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-178"></span>
            <div class="name">
              icon_like
            </div>
            <div class="code-name">.icon-icon-178
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-179"></span>
            <div class="name">
              icon_like_sel
            </div>
            <div class="code-name">.icon-icon-179
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-less"></use>
                </svg>
                <div class="name">less</div>
                <div class="code-name">#icon-less</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moreunfold"></use>
                </svg>
                <div class="name">more_unfold</div>
                <div class="code-name">#icon-moreunfold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-more"></use>
                </svg>
                <div class="name">more</div>
                <div class="code-name">#icon-more</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qrcode"></use>
                </svg>
                <div class="name">QRCode</div>
                <div class="code-name">#icon-qrcode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rfq"></use>
                </svg>
                <div class="name">RFQ</div>
                <div class="code-name">#icon-rfq</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-set"></use>
                </svg>
                <div class="name">set</div>
                <div class="code-name">#icon-set</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-smile"></use>
                </svg>
                <div class="name">Smile</div>
                <div class="code-name">#icon-smile</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-warning"></use>
                </svg>
                <div class="name">warning</div>
                <div class="code-name">#icon-warning</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-account"></use>
                </svg>
                <div class="name">account</div>
                <div class="code-name">#icon-account</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clock"></use>
                </svg>
                <div class="name">clock</div>
                <div class="code-name">#icon-clock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-process"></use>
                </svg>
                <div class="name">process</div>
                <div class="code-name">#icon-process</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lights"></use>
                </svg>
                <div class="name">lights</div>
                <div class="code-name">#icon-lights</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sports"></use>
                </svg>
                <div class="name">sports</div>
                <div class="code-name">#icon-sports</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pin"></use>
                </svg>
                <div class="name">pin</div>
                <div class="code-name">#icon-pin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-productfeatures"></use>
                </svg>
                <div class="name">product-features</div>
                <div class="code-name">#icon-productfeatures</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-navlist"></use>
                </svg>
                <div class="name">nav-list</div>
                <div class="code-name">#icon-navlist</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dollar"></use>
                </svg>
                <div class="name">dollar</div>
                <div class="code-name">#icon-dollar</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-raw"></use>
                </svg>
                <div class="name">raw</div>
                <div class="code-name">#icon-raw</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-assessedbadge"></use>
                </svg>
                <div class="name">assessed-Badge</div>
                <div class="code-name">#icon-assessedbadge</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gerenzhongxin"></use>
                </svg>
                <div class="name">personal-center</div>
                <div class="code-name">#icon-gerenzhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jifen"></use>
                </svg>
                <div class="name">integral</div>
                <div class="code-name">#icon-jifen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-skip"></use>
                </svg>
                <div class="name">skip</div>
                <div class="code-name">#icon-skip</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-compass"></use>
                </svg>
                <div class="name">compass</div>
                <div class="code-name">#icon-compass</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-security"></use>
                </svg>
                <div class="name">security</div>
                <div class="code-name">#icon-security</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bussinessman"></use>
                </svg>
                <div class="name">bussiness-man</div>
                <div class="code-name">#icon-bussinessman</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-inquirytemplate"></use>
                </svg>
                <div class="name"> inquiry-template</div>
                <div class="code-name">#icon-inquirytemplate</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-templatedefault"></use>
                </svg>
                <div class="name">template-default</div>
                <div class="code-name">#icon-templatedefault</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-survey"></use>
                </svg>
                <div class="name">survey</div>
                <div class="code-name">#icon-survey</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bussinesscard"></use>
                </svg>
                <div class="name">bussiness-card</div>
                <div class="code-name">#icon-bussinesscard</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-color"></use>
                </svg>
                <div class="name">color</div>
                <div class="code-name">#icon-color</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-color-filling"></use>
                </svg>
                <div class="name">color-filling</div>
                <div class="code-name">#icon-color-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-logistic"></use>
                </svg>
                <div class="name">logistic</div>
                <div class="code-name">#icon-logistic</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-video"></use>
                </svg>
                <div class="name">video</div>
                <div class="code-name">#icon-video</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-password"></use>
                </svg>
                <div class="name">password</div>
                <div class="code-name">#icon-password</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-column"></use>
                </svg>
                <div class="name">4column</div>
                <div class="code-name">#icon-column</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pin-fill"></use>
                </svg>
                <div class="name">pin-fill</div>
                <div class="code-name">#icon-pin-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add-account"></use>
                </svg>
                <div class="name">add-account</div>
                <div class="code-name">#icon-add-account</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-warehouse-delivery"></use>
                </svg>
                <div class="name">warehouse-delivery </div>
                <div class="code-name">#icon-warehouse-delivery</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-customization"></use>
                </svg>
                <div class="name">customization</div>
                <div class="code-name">#icon-customization</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-inspection"></use>
                </svg>
                <div class="name">inspection</div>
                <div class="code-name">#icon-inspection</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-online-tracking"></use>
                </svg>
                <div class="name">online-tracking</div>
                <div class="code-name">#icon-online-tracking</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-electrical-equipment"></use>
                </svg>
                <div class="name">electrical-equipment</div>
                <div class="code-name">#icon-electrical-equipment</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tools-hardware"></use>
                </svg>
                <div class="name">tools-hardware</div>
                <div class="code-name">#icon-tools-hardware</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-office-supplies"></use>
                </svg>
                <div class="name">office-supplies</div>
                <div class="code-name">#icon-office-supplies</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-all"></use>
                </svg>
                <div class="name">all</div>
                <div class="code-name">#icon-all</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-back"></use>
                </svg>
                <div class="name">back</div>
                <div class="code-name">#icon-back</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cart"></use>
                </svg>
                <div class="name">cart</div>
                <div class="code-name">#icon-cart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-category"></use>
                </svg>
                <div class="name">Category</div>
                <div class="code-name">#icon-category</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-help"></use>
                </svg>
                <div class="name">help</div>
                <div class="code-name">#icon-help</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-information"></use>
                </svg>
                <div class="name">information</div>
                <div class="code-name">#icon-information</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-"></use>
                </svg>
                <div class="name">icon_photo</div>
                <div class="code-name">#icon-icon-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-1"></use>
                </svg>
                <div class="name">icon_mail</div>
                <div class="code-name">#icon-icon-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-2"></use>
                </svg>
                <div class="name">icon_menu</div>
                <div class="code-name">#icon-icon-2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-3"></use>
                </svg>
                <div class="name">icon_news</div>
                <div class="code-name">#icon-icon-3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-4"></use>
                </svg>
                <div class="name">icon_buy</div>
                <div class="code-name">#icon-icon-4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-5"></use>
                </svg>
                <div class="name">icon_home</div>
                <div class="code-name">#icon-icon-5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-6"></use>
                </svg>
                <div class="name">icon_edit</div>
                <div class="code-name">#icon-icon-6</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-7"></use>
                </svg>
                <div class="name">icon_camera</div>
                <div class="code-name">#icon-icon-7</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-8"></use>
                </svg>
                <div class="name">icon_computer</div>
                <div class="code-name">#icon-icon-8</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-9"></use>
                </svg>
                <div class="name">icon_list</div>
                <div class="code-name">#icon-icon-9</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-10"></use>
                </svg>
                <div class="name">icon_cellphone</div>
                <div class="code-name">#icon-icon-10</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-11"></use>
                </svg>
                <div class="name">icon_notice</div>
                <div class="code-name">#icon-icon-11</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-12"></use>
                </svg>
                <div class="name">icon_me</div>
                <div class="code-name">#icon-icon-12</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-13"></use>
                </svg>
                <div class="name">icon_setting</div>
                <div class="code-name">#icon-icon-13</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-14"></use>
                </svg>
                <div class="name">icon_rest</div>
                <div class="code-name">#icon-icon-14</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-15"></use>
                </svg>
                <div class="name">icon_delete</div>
                <div class="code-name">#icon-icon-15</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-16"></use>
                </svg>
                <div class="name">icon_express</div>
                <div class="code-name">#icon-icon-16</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-17"></use>
                </svg>
                <div class="name">icon_wallet</div>
                <div class="code-name">#icon-icon-17</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-18"></use>
                </svg>
                <div class="name">icon_cart</div>
                <div class="code-name">#icon-icon-18</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-19"></use>
                </svg>
                <div class="name">icon_label</div>
                <div class="code-name">#icon-icon-19</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-20"></use>
                </svg>
                <div class="name">icon_transport</div>
                <div class="code-name">#icon-icon-20</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-21"></use>
                </svg>
                <div class="name">icon_after sales</div>
                <div class="code-name">#icon-icon-21</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-22"></use>
                </svg>
                <div class="name">icon_aviation</div>
                <div class="code-name">#icon-icon-22</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-23"></use>
                </svg>
                <div class="name">icon_female</div>
                <div class="code-name">#icon-icon-23</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-24"></use>
                </svg>
                <div class="name">icon_password</div>
                <div class="code-name">#icon-icon-24</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-25"></use>
                </svg>
                <div class="name">icon_male</div>
                <div class="code-name">#icon-icon-25</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-26"></use>
                </svg>
                <div class="name">icon_verification code</div>
                <div class="code-name">#icon-icon-26</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-27"></use>
                </svg>
                <div class="name">icon_music</div>
                <div class="code-name">#icon-icon-27</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-28"></use>
                </svg>
                <div class="name">icon_date</div>
                <div class="code-name">#icon-icon-28</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-29"></use>
                </svg>
                <div class="name">icon_customer service</div>
                <div class="code-name">#icon-icon-29</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-30"></use>
                </svg>
                <div class="name">icon_address</div>
                <div class="code-name">#icon-icon-30</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-31"></use>
                </svg>
                <div class="name">icon_personal information</div>
                <div class="code-name">#icon-icon-31</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-32"></use>
                </svg>
                <div class="name">icon_view</div>
                <div class="code-name">#icon-icon-32</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-33"></use>
                </svg>
                <div class="name">icon_search</div>
                <div class="code-name">#icon-icon-33</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-34"></use>
                </svg>
                <div class="name">icon_printer</div>
                <div class="code-name">#icon-icon-34</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-35"></use>
                </svg>
                <div class="name">icon_save</div>
                <div class="code-name">#icon-icon-35</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-36"></use>
                </svg>
                <div class="name">icon_time</div>
                <div class="code-name">#icon-icon-36</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-37"></use>
                </svg>
                <div class="name">icon_coupons</div>
                <div class="code-name">#icon-icon-37</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-38"></use>
                </svg>
                <div class="name">icon_prepaid card</div>
                <div class="code-name">#icon-icon-38</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-39"></use>
                </svg>
                <div class="name">icon_red packet</div>
                <div class="code-name">#icon-icon-39</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-40"></use>
                </svg>
                <div class="name">icon_like</div>
                <div class="code-name">#icon-icon-40</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-41"></use>
                </svg>
                <div class="name">icon_like_sel</div>
                <div class="code-name">#icon-icon-41</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-42"></use>
                </svg>
                <div class="name">icon_collect</div>
                <div class="code-name">#icon-icon-42</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-43"></use>
                </svg>
                <div class="name">icon_more</div>
                <div class="code-name">#icon-icon-43</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-44"></use>
                </svg>
                <div class="name">icon_collect_sel</div>
                <div class="code-name">#icon-icon-44</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-45"></use>
                </svg>
                <div class="name">icon_more_sel</div>
                <div class="code-name">#icon-icon-45</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-46"></use>
                </svg>
                <div class="name">icon_phone</div>
                <div class="code-name">#icon-icon-46</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-47"></use>
                </svg>
                <div class="name">icon_phone_sel</div>
                <div class="code-name">#icon-icon-47</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-48"></use>
                </svg>
                <div class="name">icon_help</div>
                <div class="code-name">#icon-icon-48</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-49"></use>
                </svg>
                <div class="name">icon_warning</div>
                <div class="code-name">#icon-icon-49</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-50"></use>
                </svg>
                <div class="name">icon_right_circle</div>
                <div class="code-name">#icon-icon-50</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-51"></use>
                </svg>
                <div class="name">icon_information</div>
                <div class="code-name">#icon-icon-51</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-52"></use>
                </svg>
                <div class="name">icon_wrong_circle</div>
                <div class="code-name">#icon-icon-52</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-53"></use>
                </svg>
                <div class="name">icon_minus</div>
                <div class="code-name">#icon-icon-53</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-54"></use>
                </svg>
                <div class="name">icon_plus</div>
                <div class="code-name">#icon-icon-54</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-55"></use>
                </svg>
                <div class="name">icon_minus_circle</div>
                <div class="code-name">#icon-icon-55</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-56"></use>
                </svg>
                <div class="name">icon_plus_circle</div>
                <div class="code-name">#icon-icon-56</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-57"></use>
                </svg>
                <div class="name">icon_wrong</div>
                <div class="code-name">#icon-icon-57</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-58"></use>
                </svg>
                <div class="name">icon_right</div>
                <div class="code-name">#icon-icon-58</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-59"></use>
                </svg>
                <div class="name">icon_caret_right</div>
                <div class="code-name">#icon-icon-59</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-60"></use>
                </svg>
                <div class="name">icon_caret_left</div>
                <div class="code-name">#icon-icon-60</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-61"></use>
                </svg>
                <div class="name">icon_arrow_left</div>
                <div class="code-name">#icon-icon-61</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-62"></use>
                </svg>
                <div class="name">icon_arrow_right</div>
                <div class="code-name">#icon-icon-62</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-63"></use>
                </svg>
                <div class="name">icon_zoom_in</div>
                <div class="code-name">#icon-icon-63</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-64"></use>
                </svg>
                <div class="name">icon_zoom_out</div>
                <div class="code-name">#icon-icon-64</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-65"></use>
                </svg>
                <div class="name">icon_back</div>
                <div class="code-name">#icon-icon-65</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-66"></use>
                </svg>
                <div class="name">icon_next</div>
                <div class="code-name">#icon-icon-66</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-67"></use>
                </svg>
                <div class="name">icon_download</div>
                <div class="code-name">#icon-icon-67</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-68"></use>
                </svg>
                <div class="name">icon_upload</div>
                <div class="code-name">#icon-icon-68</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-69"></use>
                </svg>
                <div class="name">icon_share</div>
                <div class="code-name">#icon-icon-69</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-70"></use>
                </svg>
                <div class="name">icon_move</div>
                <div class="code-name">#icon-icon-70</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-71"></use>
                </svg>
                <div class="name">icon_comment</div>
                <div class="code-name">#icon-icon-71</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-72"></use>
                </svg>
                <div class="name">icon_refresh</div>
                <div class="code-name">#icon-icon-72</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-73"></use>
                </svg>
                <div class="name">icon_input</div>
                <div class="code-name">#icon-icon-73</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-74"></use>
                </svg>
                <div class="name">icon_link</div>
                <div class="code-name">#icon-icon-74</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-75"></use>
                </svg>
                <div class="name">icon_list</div>
                <div class="code-name">#icon-icon-75</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-76"></use>
                </svg>
                <div class="name">icon_caret</div>
                <div class="code-name">#icon-icon-76</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-77"></use>
                </svg>
                <div class="name">icon_copy</div>
                <div class="code-name">#icon-icon-77</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-78"></use>
                </svg>
                <div class="name">icon_data</div>
                <div class="code-name">#icon-icon-78</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-79"></use>
                </svg>
                <div class="name">icon_forward</div>
                <div class="code-name">#icon-icon-79</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-80"></use>
                </svg>
                <div class="name">icon_share</div>
                <div class="code-name">#icon-icon-80</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-81"></use>
                </svg>
                <div class="name">icon_visible</div>
                <div class="code-name">#icon-icon-81</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-82"></use>
                </svg>
                <div class="name">icon_company</div>
                <div class="code-name">#icon-icon-82</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-83"></use>
                </svg>
                <div class="name">icon_employ</div>
                <div class="code-name">#icon-icon-83</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-84"></use>
                </svg>
                <div class="name">icon_invisible</div>
                <div class="code-name">#icon-icon-84</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-85"></use>
                </svg>
                <div class="name">icon_dress up</div>
                <div class="code-name">#icon-icon-85</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-86"></use>
                </svg>
                <div class="name">icon_file</div>
                <div class="code-name">#icon-icon-86</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-87"></use>
                </svg>
                <div class="name">icon_play</div>
                <div class="code-name">#icon-icon-87</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-88"></use>
                </svg>
                <div class="name">icon_weather</div>
                <div class="code-name">#icon-icon-88</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-89"></use>
                </svg>
                <div class="name">icon_voice</div>
                <div class="code-name">#icon-icon-89</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-90"></use>
                </svg>
                <div class="name">icon_browser</div>
                <div class="code-name">#icon-icon-90</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-91"></use>
                </svg>
                <div class="name">icon_scan</div>
                <div class="code-name">#icon-icon-91</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-92"></use>
                </svg>
                <div class="name">icon_order</div>
                <div class="code-name">#icon-icon-92</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-93"></use>
                </svg>
                <div class="name">icon_qr code</div>
                <div class="code-name">#icon-icon-93</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-94"></use>
                </svg>
                <div class="name">icon_wifi</div>
                <div class="code-name">#icon-icon-94</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-95"></use>
                </svg>
                <div class="name">icon_location</div>
                <div class="code-name">#icon-icon-95</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-96"></use>
                </svg>
                <div class="name">icon_gift</div>
                <div class="code-name">#icon-icon-96</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-97"></use>
                </svg>
                <div class="name">icon_mouse</div>
                <div class="code-name">#icon-icon-97</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-98"></use>
                </svg>
                <div class="name">icon_calculator</div>
                <div class="code-name">#icon-icon-98</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-99"></use>
                </svg>
                <div class="name">icon_hot</div>
                <div class="code-name">#icon-icon-99</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-100"></use>
                </svg>
                <div class="name">icon_travel</div>
                <div class="code-name">#icon-icon-100</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-101"></use>
                </svg>
                <div class="name">icon_upload</div>
                <div class="code-name">#icon-icon-101</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-102"></use>
                </svg>
                <div class="name">icon_microphone</div>
                <div class="code-name">#icon-icon-102</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-103"></use>
                </svg>
                <div class="name">icon_train</div>
                <div class="code-name">#icon-icon-103</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-104"></use>
                </svg>
                <div class="name">icon_word</div>
                <div class="code-name">#icon-icon-104</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-105"></use>
                </svg>
                <div class="name">icon_idea</div>
                <div class="code-name">#icon-icon-105</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-106"></use>
                </svg>
                <div class="name">icon_trophy</div>
                <div class="code-name">#icon-icon-106</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-107"></use>
                </svg>
                <div class="name">icon_integral</div>
                <div class="code-name">#icon-icon-107</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-108"></use>
                </svg>
                <div class="name">icon_target</div>
                <div class="code-name">#icon-icon-108</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-109"></use>
                </svg>
                <div class="name">icon_video camera</div>
                <div class="code-name">#icon-icon-109</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-110"></use>
                </svg>
                <div class="name">icon_footprint</div>
                <div class="code-name">#icon-icon-110</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-111"></use>
                </svg>
                <div class="name">icon_route</div>
                <div class="code-name">#icon-icon-111</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-112"></use>
                </svg>
                <div class="name">icon_switch</div>
                <div class="code-name">#icon-icon-112</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-113"></use>
                </svg>
                <div class="name">icon_alarm</div>
                <div class="code-name">#icon-icon-113</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-114"></use>
                </svg>
                <div class="name">icon_signal</div>
                <div class="code-name">#icon-icon-114</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-115"></use>
                </svg>
                <div class="name">icon_server</div>
                <div class="code-name">#icon-icon-115</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-116"></use>
                </svg>
                <div class="name">icon_screen</div>
                <div class="code-name">#icon-icon-116</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-117"></use>
                </svg>
                <div class="name">icon_choice</div>
                <div class="code-name">#icon-icon-117</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-118"></use>
                </svg>
                <div class="name">icon_three-dimensional</div>
                <div class="code-name">#icon-icon-118</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-119"></use>
                </svg>
                <div class="name">icon_security</div>
                <div class="code-name">#icon-icon-119</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-120"></use>
                </svg>
                <div class="name">icon_add files</div>
                <div class="code-name">#icon-icon-120</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-121"></use>
                </svg>
                <div class="name">icon_word</div>
                <div class="code-name">#icon-icon-121</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-122"></use>
                </svg>
                <div class="name">icon_add</div>
                <div class="code-name">#icon-icon-122</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-123"></use>
                </svg>
                <div class="name">icon_ppt</div>
                <div class="code-name">#icon-icon-123</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-124"></use>
                </svg>
                <div class="name">icon_invitation</div>
                <div class="code-name">#icon-icon-124</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-125"></use>
                </svg>
                <div class="name">icon_medal</div>
                <div class="code-name">#icon-icon-125</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-126"></use>
                </svg>
                <div class="name">icon_excel</div>
                <div class="code-name">#icon-icon-126</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-127"></use>
                </svg>
                <div class="name">icon_information</div>
                <div class="code-name">#icon-icon-127</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-128"></use>
                </svg>
                <div class="name">icon_global</div>
                <div class="code-name">#icon-icon-128</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-129"></use>
                </svg>
                <div class="name">icon_set top</div>
                <div class="code-name">#icon-icon-129</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-130"></use>
                </svg>
                <div class="name">icon_move up</div>
                <div class="code-name">#icon-icon-130</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-131"></use>
                </svg>
                <div class="name">icon_personal center</div>
                <div class="code-name">#icon-icon-131</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-132"></use>
                </svg>
                <div class="name">icon_sign out</div>
                <div class="code-name">#icon-icon-132</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-133"></use>
                </svg>
                <div class="name">icon_menu</div>
                <div class="code-name">#icon-icon-133</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-134"></use>
                </svg>
                <div class="name">icon_pie chart</div>
                <div class="code-name">#icon-icon-134</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-135"></use>
                </svg>
                <div class="name">icon_map</div>
                <div class="code-name">#icon-icon-135</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-136"></use>
                </svg>
                <div class="name">icon_text</div>
                <div class="code-name">#icon-icon-136</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-137"></use>
                </svg>
                <div class="name">icon_clean</div>
                <div class="code-name">#icon-icon-137</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-138"></use>
                </svg>
                <div class="name">icon_color</div>
                <div class="code-name">#icon-icon-138</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-139"></use>
                </svg>
                <div class="name">icon_word size_narrow</div>
                <div class="code-name">#icon-icon-139</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-140"></use>
                </svg>
                <div class="name">icon_layout</div>
                <div class="code-name">#icon-icon-140</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-141"></use>
                </svg>
                <div class="name">icon_grid</div>
                <div class="code-name">#icon-icon-141</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-142"></use>
                </svg>
                <div class="name">icon_enclosure</div>
                <div class="code-name">#icon-icon-142</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-143"></use>
                </svg>
                <div class="name">icon_word size_enlarge</div>
                <div class="code-name">#icon-icon-143</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-144"></use>
                </svg>
                <div class="name">icon_small screen</div>
                <div class="code-name">#icon-icon-144</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-145"></use>
                </svg>
                <div class="name">icon_full screen</div>
                <div class="code-name">#icon-icon-145</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-146"></use>
                </svg>
                <div class="name">icon_cloud-based</div>
                <div class="code-name">#icon-icon-146</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-147"></use>
                </svg>
                <div class="name">icon_pause</div>
                <div class="code-name">#icon-icon-147</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-148"></use>
                </svg>
                <div class="name">icon_next</div>
                <div class="code-name">#icon-icon-148</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-149"></use>
                </svg>
                <div class="name">icon_previous</div>
                <div class="code-name">#icon-icon-149</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-150"></use>
                </svg>
                <div class="name">icon_lightning</div>
                <div class="code-name">#icon-icon-150</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-151"></use>
                </svg>
                <div class="name">icon_contact list</div>
                <div class="code-name">#icon-icon-151</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-152"></use>
                </svg>
                <div class="name">icon_friends</div>
                <div class="code-name">#icon-icon-152</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-153"></use>
                </svg>
                <div class="name">icon_bluetooth</div>
                <div class="code-name">#icon-icon-153</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-154"></use>
                </svg>
                <div class="name">icon_gesture</div>
                <div class="code-name">#icon-icon-154</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-155"></use>
                </svg>
                <div class="name">icon_resources</div>
                <div class="code-name">#icon-icon-155</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-156"></use>
                </svg>
                <div class="name">icon_find</div>
                <div class="code-name">#icon-icon-156</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-157"></use>
                </svg>
                <div class="name">icon_adjust</div>
                <div class="code-name">#icon-icon-157</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-158"></use>
                </svg>
                <div class="name">icon-setting</div>
                <div class="code-name">#icon-icon-158</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-159"></use>
                </svg>
                <div class="name">icon_praise</div>
                <div class="code-name">#icon-icon-159</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-160"></use>
                </svg>
                <div class="name">icon_diamond</div>
                <div class="code-name">#icon-icon-160</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-161"></use>
                </svg>
                <div class="name">icon_crown</div>
                <div class="code-name">#icon-icon-161</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-162"></use>
                </svg>
                <div class="name">icon_education</div>
                <div class="code-name">#icon-icon-162</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-163"></use>
                </svg>
                <div class="name">icon_read</div>
                <div class="code-name">#icon-icon-163</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-164"></use>
                </svg>
                <div class="name">icon_sign</div>
                <div class="code-name">#icon-icon-164</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-165"></use>
                </svg>
                <div class="name">icon_invoice</div>
                <div class="code-name">#icon-icon-165</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-166"></use>
                </svg>
                <div class="name">icon_alert</div>
                <div class="code-name">#icon-icon-166</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-167"></use>
                </svg>
                <div class="name">icon_asset</div>
                <div class="code-name">#icon-icon-167</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-168"></use>
                </svg>
                <div class="name">icon_attention</div>
                <div class="code-name">#icon-icon-168</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-169"></use>
                </svg>
                <div class="name">icon_remove friend</div>
                <div class="code-name">#icon-icon-169</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-170"></use>
                </svg>
                <div class="name">icon_add friend</div>
                <div class="code-name">#icon-icon-170</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-171"></use>
                </svg>
                <div class="name">icon_resume</div>
                <div class="code-name">#icon-icon-171</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-172"></use>
                </svg>
                <div class="name">icon_sign in</div>
                <div class="code-name">#icon-icon-172</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-173"></use>
                </svg>
                <div class="name">icon_cooperation</div>
                <div class="code-name">#icon-icon-173</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-174"></use>
                </svg>
                <div class="name">icon_examine</div>
                <div class="code-name">#icon-icon-174</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-175"></use>
                </svg>
                <div class="name">icon_click</div>
                <div class="code-name">#icon-icon-175</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-176"></use>
                </svg>
                <div class="name">icon_all day</div>
                <div class="code-name">#icon-icon-176</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-177"></use>
                </svg>
                <div class="name">icon_revise</div>
                <div class="code-name">#icon-icon-177</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-178"></use>
                </svg>
                <div class="name">icon_like</div>
                <div class="code-name">#icon-icon-178</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-179"></use>
                </svg>
                <div class="name">icon_like_sel</div>
                <div class="code-name">#icon-icon-179</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
